<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
  <title>Document</title>
  <link rel="stylesheet" href="./js/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/reset.css" />
  <!-- <link rel="stylesheet/less" href="./css/common.less" />
  <link rel="stylesheet/less" href="./css/index.less" /> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./js/wowjs/css/animate.css">
</head>

<body>
  <header class="header">
    <nav class="navbar navbar-inverse">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu"
            aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-barand">SPIRIT8</a>
        </div>

        <div class="collapse navbar-collapse navbar-right" id="menu">
          <ul class="nav navbar-nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">testimonials</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>

      </div>
    </nav>
  </header>

  <div class="box">
    <h1 class="wow fadeInDown">wELCOME on <span>spirit8</span></h1>
    <p>We are a digital agency with years of experience and with extraordinary people</p>
    <p><a href="#team"><img src="./images/mondome.png" alt=""></a></p>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-7 col-sm-12 leftsize">
        <img src="./images/mac.png" class="img-responsive">
      </div>
      <div class="col-md-5 col-sm-12 rightsize">
        <h3>About us</h3>
        <h2><span>Some</span>words<b>about us</b></h2>
        <p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we
          brand companies in a way they will never forget.</p>
        <ul>
          <li>
            <img src="./images/icon.png">
            <span>Mission -</span> We deliver uniqueness and quality
          </li>
          <li>
            <img src="./images/icon.png">
            <span>Skills -</span> Delivering fast and excellent results
          </li>
          <li>
            <img src="./images/icon.png">
            <span>Clients -</span> Satisfied clients thanks to our experience
          </li>
        </ul>
        <button>
          <img src="./images/utils.png">
          Browse our work
        </button>
      </div>
    </div>
  </div>

  <div class="team" id="team">
    <div class="container">
      <h2 class="title-h2">MEET <span>OUT TEAM</span></h2>
      <hr class="title-hr-l">
      <hr class="title-hr-s">

      <ul class="row teamlist">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <img src="./images/circular.png" class="img-circle img-responsive" />
          <h3>Jason Statham</h3>
          <span>Knife designer</span>
          <p>Do not seek to change what has come before. Seek to create that which has not.</p>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <img src="./images/circular.png" class="img-circle img-responsive" />
          <h3>Van Damme</h3>
          <span>No English</span>
          <p>Do not seek to change what has come before. Seek to create that which has not.</p>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <img src="./images/circular.png" class="img-circle img-responsive" />
          <h3>Sylvester Stallone</h3>
          <span>Cigar Lover</span>
          <p>Do not seek to change what has come before. Seek to create that which has not.</p>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <img src="./images/circular.png" class="img-circle img-responsive" />
          <h3>Jet Li</h3>
          <span>I need more money</span>
          <p>Do not seek to change what has come before. Seek to create that which has not.</p>
        </li>
      </ul>
      <ul class="spot">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <div class="services container">
    <h2 class="title-h2">take a look at <span>our services</span></h2>
    <hr class="title-hr-l">
    <hr class="title-hr-s">
    <p class="paragraph">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
      Extremes
      of Good
      and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
      Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
      1.10.32.
    </p>
    <ul class="row teamlist">
      <li class="col-md-3 col-sm-6 col-xs-12">
        <div class="imgbox">
          <img src="./images/services1.png">
        </div>
        <h3>Web design</h3>
        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
      </li>
      <li class="col-md-3 col-sm-6 col-xs-12">
        <div class="imgbox">
          <img src="./images/services2.png">
        </div>
        <h3>PHOTOGRAPHY</h3>
        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
      </li>
      <li class="col-md-3 col-sm-6 col-xs-12">
        <div class="imgbox">
          <img src="./images/services3.png">
        </div>
        <h3>Mobile apps</h3>
        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
      </li>
      <li class="col-md-3 col-sm-6 col-xs-12">
        <div class="imgbox">
          <img src="./images/services4.png">
        </div>
        <h3>marketing</h3>
        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
      </li>
    </ul>
  </div>

  <div class="clients">
    <div class="container">
      <h2 class="title-h2">SOME OF <span>OUR CLIENTS</span> </h2>
      <hr class="title-hr-l">
      <hr class="title-hr-s">

      <div class="logobox">
        <img src="./images/CHANEL.png">
        <img src="./images/ZARA.png">
        <img src="./images/GUERLAIN.png">
        <img src="./images/LANCOME.png">
        <img src="./images/LANCOME.png">
      </div>

      <ul class="spot">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <div class="work">
    <div class="container">
      <h2 class="title-h2">SOME OF <span>OUR CLIENTS</span> </h2>
      <hr class="title-hr-l">
      <hr class="title-hr-s">
      <p class="paragraph">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
        Extremes
        of Good
        and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
        Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
        1.10.32.
      </p>

      <div class="tag">
        <p class="bold">Filter by type</p>
        <ul>
          <li class="bold">All</li>
          <li>|</li>
          <li>Web design</li>
          <li>|</li>
          <li>Mobile design </li>
          <li>|</li>
          <li>Photograpy</li>
        </ul>
      </div>

      <ul class="row imgbox">
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox1.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox1.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox1.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox1.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox2.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox2.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox2.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox2.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>

        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox3.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox3.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox3.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12">
          <div class="imglist">
            <img src="./images/imgbox3.png" alt="">
            <div class="Curtain">
              <h3>Trend and fashion</h3>
              <p>Website design</p>
              <img src="./images/Curtain.png">
            </div>
          </div>
        </li>
      </ul>

    </div>
  </div>

  <div class="testimonials">
    <div class="container">
      <h2 class="title-h2"><span>our clients’</span> testimonials</h2>
      <hr class="title-hr-l">
      <hr class="title-hr-s">
      <p class="paragraph">
        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
      </p>
      <p class="dean"><span>Dean Martin,</span> CEO Acme Inc.</p>
      <ul class="spot">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <div class="contact">
    <h2 class="title-h2">feel free to <span>contact us</span></h2>
    <hr class="title-hr-l">
    <hr class="title-hr-s">

    <p class="text">
      Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
      Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
      Renaissance.
    </p>

    <div class="information">
      <form action="">
        <div class="info">
          <div class="name">
            <p>Name <span>*</span></p>
            <input type="text">
          </div>
          <div class="email">
            <p>Email address <span>*</span></p>
            <input type="email">
          </div>
        </div>
        <div class="message">
          <p>Message <span>*</span></p>
          <textarea name="" id="" cols="30" rows="10"></textarea>
        </div>
        <p class="send">
          <input type="submit" value="SEND">
        </p>
      </form>
    </div>

  </div>

  <footer class="footer">
    <div class="container">
      <div class="row">
        <p class="col-md-6 col-sm-12">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></p>
        <ul class="col-md-6 col-sm-12">
          <li><img src="./images/footerimg1.png"></li>
          <li><img src="./images/footerimg2.png"></li>
          <li><img src="./images/footerimg3.png"></li>
          <li><img src="./images/footerimg4.png"></li>
          <li><img src="./images/footerimg5.png"></li>
        </ul>
      </div>
    </div>
  </footer>




</body>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="./js/wowjs/js/wow.min.js"></script>
<script src="./js/less/less.min.js"></script>
<script>
  new WOW().init();
</script>

</html>